<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <title></title>
  <link rel="stylesheet" href="../../stylesheets/common.css" />
  <link rel="stylesheet" href="../../stylesheets/table.css" />
</head>
<style>
  .clearfix:after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both
  }

  .clearfix {
    zoom: 1;
  }
  #table{
    width: 48%;
    float: left;
  }
  #tearchers{
    width: 48%;
    float:right;
  }
  #table ul,#tearchers ul {
    width: 16%;
    border: 1px solid #ddd;
    display: inline-block;
    float: left;
    border-right: none;
    border-bottom: none;
    box-sizing: border-box;
  }
  #table ul.content,#tearchers ul.content{
    width: 16.8%;
  }
  #table ul li.header,#tearchers ul li.header {
    height: 45px;
    line-height: 45px
  }
  #table ul.header li div, #tearchers ul.header li div{
    margin-top: 4px;
  }

  #table ul .header ,#tearchers ul .header{
    background: #f2f2f2;
  }

  #table ul.last ,#tearchers ul.last {
    border-right: 1px solid #ddd;
  }

  #table ul li ,#tearchers ul li{
    width: 100%;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    text-align: center;
    height: 60px;
    line-height: 60px;
  }

  #table ul li.item ,#tearchers ul li.item {
    cursor: pointer;
  }


  #table ul li div ,#tearchers ul li div {
    line-height: 18px;
  }

  #table ul .active ,#tearchers ul .active {
    background: #00abea4c;
  }
</style>

<body>
  <div class="place">
    <span class="label-span">位置：</span>
    <ul id="place-list" class="place-ul">
      <li>
        调班
      </li>
    </ul>
  </div>
  <div class="body-warp clearfix">
    <div class="panel" style="width:100%;">
      <div class="panel-title">
        <i class="form-icon"></i>
        <span class="title-text">调班</span>
      </div>
      <div class="panel-body clearfix" style="background: white;">
        <div class="filter-block" style="background: white;padding:0;">
          <div class="form-group">
            <a href="javascript:void(0);" id="changeBtn" class="btn">
              <i class="iconfont">&#xe649;</i>调班</a>
          </div>

        </div>
        <div id="table">
          <ul>
            <li class="header">节次/星期</li>
            <li>第一节</li>
            <li>第二节</li>
            <li>第三节</li>
            <li>第四节</li>
            <li>第五节</li>
            <li>第六节</li>
            <li>第七节</li>
          </ul>
          <ul class="clearfix content last">
            <li class=" header item">
              <div>
                <p>12-11</p>
                <p>星期一</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
          </ul>
        </div>
        <div id="tearchers">
          <ul>
            <li class="header">节次/星期</li>
            <li>第一节</li>
            <li>第二节</li>
            <li>第三节</li>
            <li>第四节</li>
            <li>第五节</li>
            <li>第六节</li>
            <li>第七节</li>
          </ul>
          <ul class="clearfix content last">
            <li class="header item">
              <div>
                <p>12-11</p>
                <p>星期一</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
            <li class="item">
              <div>
                <p>一（1）班</p>
                <p>英语</p>
                <p>张三</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div>
        

      </div>
    </div>

  </div>
  <script type="text/javascript" src="../../ext/jquery/jquery-1.11.3.min.js"></script>

  <script>
    $(function () {
      var oneDom = '', towDom = '', domIndex = 0;
      var data = [
        [
          { id: 12323, day: '12-11',text:'星期天' },
          { id: 12356723, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 123856784723, name: '张三2431',class:'一(1)班',subject:'英语' },
          { id: 125678323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 1256323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 1278785323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 12576323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 12456745323, name: '张三1',class:'一(1)班',subject:'英语' },
        ],
        [
          { id: 12367423, day: '12-11',text:'星期天' },
          { id: 1257323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 12789323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 12395623, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 1236788523, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 12356723, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 1237823, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 12385623, name: '张三1',class:'一(1)班',subject:'英语' },
        ],
        [
          { id: 12323, day: '12-11',text:'星期天' },
          { id: 12345623, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 12456345323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 1256323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 1433522323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 123123423, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 13465412323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 12234323, name: '张三1',class:'一(1)班',subject:'英语' },
        ],
        [
          { id: 12323, day: '12-11',text:'星期天' },
          { id: 123123423, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 1233423, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 122423323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 1231244323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 12123323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 1234323, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 12341323, name: '张三3241',class:'一(1)班',subject:'英语' },
        ],
        [
          { id: 12323, day: '12-11',text:'星期天' },
          { id: 123221, name: '张三1432',class:'一(1)班',subject:'英语' },
          { id: 1232334, name: '张三132',class:'一(1)班',subject:'英语' },
          { },
          { id: 12334123, name: '张三12',class:'一(1)班',subject:'英语' },
          { id: 12322343, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 1223423, name: '张三1',class:'一(1)班',subject:'英语' },
          { id: 12323423, name: '张三1',class:'一(1)班',subject:'英语' },
        ],
      ]
      tableRender('#table',data)
      tableRender('#tearchers',data)
      $('#changeBtn').on('click', function () {
        if(oneId == '' || towDom == ''){
          alert('请选择要调班的对象');
          return;
        }
        var oneId = oneDom.attr('data-id');
        var towId = towDom.attr('data-id');
        var oneHtml = oneDom.html();
        var twoHtml = towDom.html();
        oneDom.attr('data-id', towId).html(twoHtml)
        towDom.attr('data-id', oneId).html(oneHtml)
      })

      function tableRender(dom, data) {
        if (!data || $(dom).length == 0) return;
        var html = '<ul><li class="header">节次/星期</li><li>第一节</li><li>第二节</li><li>第三节</li><li>第四节</li><li>第五节</li><li>第六节</li><li>第七节</li></ul>';
        for (var i = 0; i < data.length; i++) {
          for (var j = 0; j < data[i].length; j++) {
            if (j == 0) {
              html += '<ul class="clearfix content '+ (i == data.length - 1?'last':'')+'"><li class="header item"><div><p>'+data[i][j].day+'</p><p>'+data[i][j].text+'</p></div></li>';
            }else if(data[i][j].id){
              html += '<li data-id="'+ data[i][j].id+'" class="item"><div><p>'+data[i][j].class+'</p><p>'+data[i][j].subject+'</p><p>'+data[i][j].name+'</p></div></li>'
            }else{
              html += '<li class="item"></li>'
            }
            if (j == data[i].length - 1) {
              html += '</ul>'
            }
          }
        }
        $(dom).html(html)
        $(dom).on('click', 'li', function (e) {
          var acDome = dom == '#table'? oneDom  : towDom;
          if($(this).attr('data-id')){
            if(acDome == '' ) {
              acDome = $(this);            
              $(this).addClass('active')
            }else if(acDome.attr('data-id') != $(this).attr('data-id')){
              acDome.removeClass('active')
              acDome = $(this);            
              $(this).addClass('active')
            } else if(acDome.attr('data-id') == $(this).attr('data-id')){
              acDome.removeClass('active')
              acDome = ''; 
            }
            if(dom == '#table') {
              oneDom = acDome
            }else{
              towDom = acDome
            }
          }
        })
      }
    });
    

  </script>
</body>

</html>